<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>项目访问</title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#container {
				height: 100%
			}
			
			.project{
				width: 100%; 
				height: 50px; 
				line-height:50px; 
				z-index: 1000;
				position: fixed;
				top: 0px;
				left:5%;
				float: left;
			}
			.project a{
				color: blue;
			}
			.gcinfo{
				width: 40%; 
				height: 100%; 
				z-index: 1000;
				position: fixed;
				top: 0px;
				right:1px;
				border: none;
			}
			.gcinfo iframe{
				border: none;
				width: 100%;
				height: 100%;
			}
			.xzriqi{
				width: 100px; 
				height: 50px; 
				line-height:50px; 
				float: left;
			}
			.xzriqi input{
				border-radius: 5px;
				border: none;
			}
			.xiangmu{
				width: 69%; 
				height: 50px; 
				line-height:50px; 
				float: left;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IPbGICDfxoG0vjpmGgC13ar4cajjgrvy">
			//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=IPbGICDfxoG0vjpmGgC13ar4cajjgrvy"
		</script>
	
	</head>

	<body>
		<div class="project">
			<div class="xzriqi">
				<input type="text"  id="timeselect"  style="width: 70px;" value=""  placeholder="选择日期"></input>	
			</div>
		 	
		 	<div class="xiangmu">
		 	
		 	</div>
		</div>
		<div class="gcinfo">
			<iframe src="/f/jiankong/index">
			
			</iframe>
		</div>
		<div id="container"></div>
		<script src="/js/jquery.min.js?v=2.1.4" type="text/javascript" charset="utf-8"></script>
		<script src="/js/layui/duli/layer.js"></script>
		<script src="/js/layui/layui.all.js"></script>
		<script type="text/javascript">
		
		var startTime;
		var projectName;
		
		layui.use('laydate', function(){
			var laydate = layui.laydate;	  
				//执行一个laydate实例
				laydate.render({
				elem: '#timeselect',
				type:'date',
				done: function(value, date, endDate){//日期时间被切换后的回调
					console.log(value);
					startTime = value;				
					updateGps(projectName);
				}	
				});
			}); 
		 
		
		
		function addClickHandler(content,marker){
			marker.addEventListener("click",function(e){
				openInfo(content,e)}
			);
		}
		function openInfo(content,e){
			var p = e.target;
			
		}
		 
		 
		 
		 var map = new BMap.Map("container", {});                        // 创建Map实例
		    map.enableScrollWheelZoom();                        //启用滚轮放大缩小	 
			// 创建地图实例  
			var point = new BMap.Point(116.404, 39.915);
			// 创建点坐标  
			map.centerAndZoom(point, 6);
			// 初始化地图，设置中心点坐标和地图级别
			
			var geolocation = new BMap.Geolocation();
			// 开启SDK辅助定位
			//geolocation.enableSDKLocation();
			geolocation.getCurrentPosition(function(r){
				if(this.getStatus() == BMAP_STATUS_SUCCESS){
					var mk = new BMap.Marker(r.point);
					/* map.addOverlay(mk); */
					map.panTo(r.point);
				}
			})
		    
		    
		    function updateMakes(projectName){	
				//清除所有覆盖物
				layer.msg("根据访问数量不同,查询大概需要30秒-1分钟左右");
				map.clearOverlays();
				var index =   layer.load(1,  { 
					  shade: [0.1,'#fff'] //0.1透明度的白色背景
				});
				
				$.ajax({
					type: "get",
					url:  "http://dianxiaopu.hbweiyinqing.cn:9080/f/jiankong/getProjectIpAndGps",
					data:{
						projectName:projectName,
						startTime:startTime
					},
					async:true, 
					success: function(data) {	
						console.log(data);
						layer.close(index);
						 if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
					        var points = [];  // 添加海量点数据
					        var pot;
					        for(var i = 0; i < data.l.length;i++){
				        	 var model = data.l[i];		
				        	 
							 pot =  new BMap.Point(model.lon, model.lat)
							 pot.projectName = model.projectName;
							 pot.number = model.number;
							 pot.ip = model.ip;
							 //addClickHandler(model.projectName,pot);
					         points.push(pot);
					        }
					        var options = {
					            size: BMAP_POINT_SIZE_BIG,
					            shape: BMAP_POINT_SHAPE_CIRCLE,
					            color: '#f44336' 
					        }
					        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
					      
					        pointCollection.addEventListener('mouseover', function (e) {
	  								 
					          var point = new BMap.Point(e.point.lng, e.point.lat);
								var infoWindow = new BMap.InfoWindow(e.point.projectName+'<br /> 访问次数:'+e.point.number+"<br /> ip:"+e.point.ip,point);  // 创建信息窗口对象 
								map.openInfoWindow(infoWindow,point);    
					        });
					       /*  
					        pointCollection.addEventListener('remove', function (e) {
					        	 
						     });   */
					        map.addOverlay(pointCollection);  // 添加Overlay
					    } else {
					        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
					    }	 
					},
					error: function() {
					
					}
				});
			
		}
		      
		updateMakes(null);
		/* var t1=window.setInterval(updateMakes, 60000); */
		 
		
		function updateGps(projectName){
			projectName = projectName;
			updateMakes(projectName);
		}
		
		function getProjectInfo (){
			$.ajax({
				type: "get",
				url:  "http://dianxiaopu.hbweiyinqing.cn:9080/f/jiankong/getProjectName",
				async:true, 
				success: function(data) {	
				 $(".xiangmu").empty();	
				  var str = ' 项目名称：';	
				  for(var i = 0; i < data.length;i++){	 
					 str+='		 <a  onclick="updateGps(\''+data[i].projectName+'\')">[ '+data[i].projectName+' ]</a>' ;
				  }		 
				  $(".xiangmu").append(str);	
				},
				error: function() {
				
				}
			});
		}
		
		getProjectInfo ();   
		 
		
			
		</script>
	</body>
</html>
